<template>
	<div class="dir_query_rules">
		<div class="item" v-for="(item, index) in rulesArray" :key="index">
			<el-select class="type" v-model="item.type" placeholder="规则类型" style="width: 100px">
				<el-option label="名称" value="1"></el-option>
				<el-option label="格式" value="2"></el-option>
			</el-select>
			<template v-if="item.type === '1'">
				<el-input v-model="item.value" placeholder="输入查询名称"></el-input>
			</template>
			<template v-if="item.type === '2'">
				<el-select v-model="item.value" placeholder="选择文件类型" style="width: 100%">
					<el-option v-for="(item, index) in fileTypeArr" :key="index" :label="item.msg" :value="item.value"></el-option>
				</el-select>
			</template>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	props: {
		value: { type: String, default: '' }
	},
	data() {
		return {
			rulesValue: this.value,
			rulesArray: []
		};
	},
	computed: {
		...mapGetters(['dictEnums']),
		fileTypeArr() {
			return [{ msg: '全部', value: '0' }, ...this.dictEnums['FILE_TYPE']];
		}
	},
	watch: {
		value(value) {
			this.rulesValue = value;
		},
		rulesValue: {
			handler(value) {
				this.$emit('input', value);
				if (!value) {
					this.rulesArray = [
						{ type: '1', or: '1', value: '' },
						{ type: '2', or: '1', value: '' }
					];
				} else {
					this.rulesArray = JSON.parse(value);
				}
			},
			immediate: true
		}
	}
};
</script>

<style lang="scss" scoped>
.dir_query_rules {
	.item {
		display: flex;
		align-items: center;
		margin-top: 10px;
		&:first-child {
			margin-top: 0;
		}
	}
	.el-select.type {
		flex-shrink: 0;
		margin-right: 10px;
	}
}
</style>
